<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="100">
          <FormItem label="类型">
            <RadioGroup v-model="hyperlink_type" type="button">
              <Radio label="link">链接跳转</Radio>
              <Radio label="custom">自定义脚本</Radio>
            </RadioGroup>
          </FormItem>

          <FormItemPanel title="超链接配置">
            <Alert show-icon style="padding-right: 5px;">此处配置的文本和链接地址会覆盖动态数据源的配置</Alert>
            <FormItem label="文本">
              <Input size="small" v-model="text" placeholder=""/>
            </FormItem>
            <FormItem label="链接地址">
              <Tooltip :max-width="200" placement="left" class="w-full"
                       content="如果需要平台内页面跳转，建议使用${BASE_PATH}读取项目根路径，后面接页面相对路径(path)，例如：${BASE_PATH}/1234567890">
                <Input size="small" v-model="href" placeholder="http://xxx.xxx.xxx"/>
              </Tooltip>
            </FormItem>
            <FormItem label="链接打开方式">
              <Select :transfer="true" size="small" v-model="target">
                <Option v-for="item in $PnDict.targets" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </FormItemPanel>

          <FormItem label="字间距">
            <InputNumber size="small" :max="10000" :min="0" v-model="letterSpacing"></InputNumber> px
          </FormItem>
          <FormItem label="文字排列方式">
            <Select size="small" v-model="writingMode">
              <Option v-for="item in $PnDict.writingModes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>

          <FormItemPanel title="默认样式">
            <FormItem label="颜色">
              <PnColorPicker size="small" v-model="defaultStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="字体大小">
              <InputNumber size="small" :max="10000" :min="0" v-model="defaultStyle.fontSize"></InputNumber> px
            </FormItem>
            <FormItem label="字体粗细">
              <Select size="small" v-model="defaultStyle.fontWeight">
                <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="阴影颜色">
              <PnColorPicker size="small" v-model="defaultStyle.shadowColor" alpha recommend/>
            </FormItem>
            <FormItem label="阴影大小">
              <InputNumber size="small" :max="10000" :min="0" v-model="defaultStyle.shadowBlur"></InputNumber>
            </FormItem>
            <FormItem label="文本修饰">
              <Select size="small" v-model="defaultStyle.textDecoration">
                <Option v-for="item in $PnDict.textDecorations" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </FormItemPanel>
          <FormItemPanel title="鼠标滑入样式">
            <FormItem label="颜色">
              <PnColorPicker size="small" v-model="hoverStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="字体大小">
              <InputNumber size="small" :max="10000" :min="0" v-model="hoverStyle.fontSize"></InputNumber> px
            </FormItem>
            <FormItem label="字体粗细">
              <Select size="small" v-model="hoverStyle.fontWeight">
                <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="阴影颜色">
              <PnColorPicker size="small" v-model="hoverStyle.shadowColor" alpha recommend/>
            </FormItem>
            <FormItem label="阴影大小">
              <InputNumber size="small" :max="10000" :min="0" v-model="hoverStyle.shadowBlur"></InputNumber>
            </FormItem>
            <FormItem label="文本修饰">
              <Select size="small" v-model="hoverStyle.textDecoration">
                <Option v-for="item in $PnDict.textDecorations" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </FormItemPanel>
        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="HyperlinkComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
          <Alert show-icon style="padding-right: 5px;">只有当组件类型为自定义脚本时才会运行以下脚本</Alert>
          <FormItemPanel title="鼠标单击运行脚本">
            <CodeEditor v-model="customClickJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'HyperlinkCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      ...mapFields({

        hyperlink_type: 'component.compConfigData.hyperlink_type',

        text: 'component.compConfigData.text',
        href: 'component.compConfigData.href',
        target: 'component.compConfigData.target',
        letterSpacing: 'component.compConfigData.letterSpacing',
        writingMode: 'component.compConfigData.writingMode',

        defaultStyle: 'component.compConfigData.defaultStyle',
        hoverStyle: 'component.compConfigData.hoverStyle',

        customClickJsCode: 'component.compConfigData.customClickJsCode',

      })
    }
  }
</script>

<style scoped>

</style>
